<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
    </div>
    <div class="all-flow-table-box">
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column align="center" label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="productName" label="产品名称" width="180"></el-table-column>
        <el-table-column sortable align="center" prop="productPrice" label="与商家合作价格" width="180"></el-table-column>
        <el-table-column align="center" prop="supplierName" label="商家姓名" width="180"></el-table-column>
        <el-table-column align="center" prop="supplierTel" label="商家联系方式" width="180"></el-table-column>
        <el-table-column align="center" prop="agentinfo.trueName" label="供应商名称" width="180"></el-table-column>
        <el-table-column align="center" prop="status" label="状态" width="80"
          :filters="[{text: '已通过', value: 1}, {text: '已驳回', value: -1}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span style="color:#67c23a" v-if="list[scope.$index].status===1">已通过</span>
            <span style="color:#f56c6c" v-else-if="list[scope.$index].status===-1">已驳回</span>
            <span style="color:#e6a23c" class="success" v-else>待联系</span>
          </template>
        </el-table-column>
        <el-table-column></el-table-column>
        <el-table-column align="center" label="操作" width="215">
          <template slot-scope="scope">
            <el-button size="mini" type="success" @click="handlePass(scope.$index, scope.row)">通过</el-button>
            <el-button size="mini" type="danger" @click="handleReject(scope.$index, scope.row)">驳回</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="all-pagination">
      <el-pagination background layout="prev, pager, next" :page-size="size" :total="count" @current-change="currentPage"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 10,
      count: 0,
      list: []
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    },
    getList(page, size) {
      let _this = this;
      this.$ajax({
        url:'product/informationList',
        data:{
          app:{
            page: page,
            size: size === undefined ? this.size : size,
          }
        },
        perfect(con) {
          _this.list = con.list;
          _this.count = con.count;
        },
        success(res) {
          if (res.data.code !== 1) {
            _this.$message({
              message: res.data.msg,
              type: 'warning'
            });
          }
        }
      });
    },
    handlePass(index, row) {
      if (this.list[index].status === 1) {
        this.$alert("已经通过了，无需再次通过", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      this.$confirm("确定要通过么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //通过操作
        this.$ajax({
          url: 'product/informationModify',
          data: {
            app:{
              InformationId: row.InformationId,
              rejectReason: "",
              status: 1
            }
          },
          success(res) {
            if (res.data.code === 1) {
              _this.$message({
                message: res.data.msg,
                type: 'success',
                onClose(){
                  _this.$router.go(0);
                }
              });
            } else {
              _this.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }
          }
        });
      }).catch(() => {});
    },
    handleReject(index, row) {
      const _this = this;
      if (this.list[index].status === -1) {
        this.$alert("已经驳回，无需再次驳回", "提示", {
          confirmButtonText: "确定"
        });
        return;
      }
      this.$confirm("您确定要驳回么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //驳回操作
        this.$prompt('请输入驳回理由', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$ajax({
            url: 'product/informationModify',
            data: {
              app:{
                InformationId: row.InformationId,
                rejectReason: value,
                status: -1
              }
            },
            success(res) {
              if (res.data.code === 1) {
                _this.$message({
                  message: res.data.msg,
                  type: 'success',
                  onClose(){
                    _this.$router.go(0);
                  }
                });
              } else {
                _this.$message({
                  message: res.data.msg,
                  type: 'warning'
                });
              }
            }
          });
        }).catch(() => {});
      }).catch(() => {});
    },
    handleDelete(row) {
      this.$confirm("您确定要删除么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除操作
        console.log(row);

      }).catch(() => {});
    },
    currentPage(page) {
      this.getList(page);
    }
  },
  created() {
    this.getList(1);
  }
};
</script>